import { useEffect } from 'react'
import { useNavigate } from 'react-router'
import dayjs from 'dayjs'
import copy from 'copy-to-clipboard'
import { Badge, Button, Card, message, Progress, Space, Tag, theme, Tooltip } from 'antd'
import { CopyOutlined, LeftOutlined } from '@ant-design/icons'

import { getLogisticsStatusName } from '@oBiz/TrackOrder/utils'
import { useUrlParams } from '../utils'
import { Actions } from './Actions'
import { useBoundStore } from './store'
import { useBaseInfo } from './useBaseInfo'

export const BaseInfo = () => {
  useBaseInfo() // 放最顶部

  const { token } = theme.useToken()
  const navigate = useNavigate()
  const { waybillNo } = useUrlParams()
  const loading = useBoundStore(v => v.loading)
  const waybillInfo = useBoundStore(v => v.waybillInfo)
  const {
    abnormalStatus,
    deliverDate,
    age,
    currentLogisticsNode: curr,
    logisticsNodeList: list,
    archiveFlag,
  } = waybillInfo || {}
  const currIndex = list?.findIndex(v => v === curr) || -1
  const isError = abnormalStatus === -1 || abnormalStatus === 0

  // 清理
  useEffect(() => () => useBoundStore.setState(useBoundStore.getInitialState(), true), [])

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', paddingBottom: 16 }}>
        <Space style={{ flex: '1 1' }} size={2} direction="vertical">
          <Space size={16}>
            <Tooltip title="返回运单列表">
              <Button size="small" icon={<LeftOutlined />} onClick={() => navigate(`/biz/trackOrder/list`)} />
            </Tooltip>
            <Space size={0}>
              <span style={{ fontSize: 20 }}>{waybillNo || '--'}</span>
              <Button
                type="text"
                icon={<CopyOutlined />}
                disabled={!waybillNo}
                onClick={() => {
                  copy(waybillNo)
                  message.success('复制成功', 1)
                }}
              />
            </Space>
            {archiveFlag === 0 && isError && (
              <Badge
                color={abnormalStatus === -1 ? 'orange' : 'blue'}
                text={abnormalStatus === -1 ? '待处理' : '处理中'}
              />
            )}
            {archiveFlag === 1 && (
              <Tag>
                <Badge color={$CSS_VAR.statusDefault} text="已归档" />
              </Tag>
            )}
          </Space>
          <Space style={{ flex: 'none', color: token.colorTextTertiary }}>
            <span>发货日期:</span>
            <span>{deliverDate ? dayjs(deliverDate).$formatSmart($F_YMD) : '--'}</span>
            <span>{age || '--'}天</span>
          </Space>
        </Space>
        <Actions />
      </div>

      <Card styles={{ body: { height: 88 } }} loading={loading}>
        <Space style={{ width: '100%' }} styles={{ item: { flex: '1 1' } }} size={8}>
          {list?.map((v, i) => (
            <Space key={v} style={{ width: '100%' }} size={4} direction="vertical">
              <Progress
                size="small"
                strokeColor={v === curr && isError ? token.colorError : token.blue}
                trailColor={v === curr && isError ? '#FED4D4' : '#CDD8FA'}
                percent={v === curr ? 50 : i > currIndex ? 0 : 100}
                showInfo={false}
              />
              <span>{getLogisticsStatusName(v)}</span>
            </Space>
          ))}
        </Space>
      </Card>
    </div>
  )
}
